import { memo } from 'react';
import type { FC, PropsWithChildren } from 'react';
import { Avatar, Divider, Tag } from 'antd';
import dayjs from 'dayjs';
import { formatTime, formatUrl } from '@/utils/format';

const BooksCommentItem: FC<PropsWithChildren<{ data: API.CommentStruct }>> = ({
  data,
}) => {
  return (
    <div>
      <div className={'flex w-full'}>
        <img
          className={
            'h-14 w-14 ring-1 ring-offset-4 ring-blue-300 ring-offset-blue-100 rounded-full object-contain '
          }
          src={formatUrl(data.user?.avatar!)}
          alt={'avatar'}
        />
        <div className={'ml-4 w-full'}>
          <div className={'space-y-1.5 '}>
            <div
              className={
                'text-base text-blue-600 leading-6  tracking-[0.05rem]'
              }
            >
              <span className={'mr-3'}>{data.user?.name}</span>
            </div>
            <div
              className={'text-black leading-6 font-medium tracking-[0.07rem]'}
            >
              {data.orders_id !== 1 && (
                <Tag color={'orange'}>
                  <span className={'text-[12px]'}>买家评论</span>
                </Tag>
              )}
              {data.content}
            </div>
            <div className={'text-[14px] text-gray-500 '}>
              <span>{formatTime(data.created_at)}</span>
            </div>
          </div>
          {data && data.reply ? (
            <div className={'flex bg-white p-2 mt-3 rounded-lg w-full'}>
              <Tag color={'blue'}>商家回复:</Tag>
              <div>{data.reply}</div>
            </div>
          ) : null}
        </div>
      </div>
      <Divider />
    </div>
  );
};

export default memo(BooksCommentItem);
